<template>
  <div class="content">
    <div class="game_item">
      <ImgT src="/imgs/club/isLocked.png" class="game_icon" alt="" v-if="isLocked !== 0" />
      <ImgT :key="icon" :src="joinURL(settings.backend_upload, icon)" alt="" class="game_icon" v-else />
      <div class="game_info">
        <h3 class="game_text">{{ gameClubIds[title] }}</h3>
        <!-- <p class="game_description">{{ description }}</p> -->
      </div>
      <div class="game_action" :class="{ locked: isLocked !== 0 }" @click="handleClick">
        <ImgT src="/imgs/club/arrow.png" alt="" v-if="!isLocked" />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
// import { useI18n } from "vue-i18n";
import { ref } from "vue";
// import {useRoute, useRouter} from "vue-router";
import { joinURL } from '@/utils/publicMethods'

// const route = useRoute();
// const router = useRouter();
import { useI18n } from "vue-i18n";
const { t } = useI18n();
import { storeToRefs } from 'pinia';
import { Page } from '@/store/page';
import pinia from '@/store';
const { settings } = storeToRefs(Page(pinia));

const props: any = defineProps({
  icon: {
    type: String,
    required: true,
  },
  title: {
    type: Number,
    default: 49,
  },
  isLocked: {
    type: Number,
    default: 0,
  },
});

const gameClubIds: any = ref({
  49: t('club_page_49'),
  47: t('club_page_47'),
})

const handleClick = () => {
  if (!props.isLocked) {

  }
}

</script>

<style scoped lang="scss">
.content {
  width: 100vw;

  .game_item {
    width: 272px;
    height: 79px;
    // margin-left: 14px;
    display: flex;
    align-items: center;
    padding: 10px;
    margin: 0px 0 8px 14px;
    border-radius: 8px;
    background: #1D1C3C;
  }

  .game_icon {
    width: 50px;
    height: 50px;
    margin-right: 10px;
    border-radius: 8px;
  }

  .game_info {
    flex: 1;
  }

  .game_text {
    font-size: 16px;
    margin: 0;
    color: #FFF;
  }

  .game_description {
    font-size: 12px;
    color: #AFB6BD;
  }

  .game_action {
    img {
      width: 24px;
      height: 24px;
    }
  }

  .locked {
    cursor: not-allowed;
    color: #ccc;
  }
}
</style>
